html body {
  margin: 0;
  padding: 0;
}
.containers {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.containers .left {
  flex: 1;
  height: 100%;
  background-color: #26282b;
  display: flex;
  justify-content: center;
  align-items: center;
}
.containers .left .container {
  border-radius: 50%;
  box-shadow: 12px 12px 14px #18191b, -12px -12px 14px #34373b;
  position: relative;
  width: 400px;
  height: 400px;
}
.containers .left .container .clock-container {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0) 70.71%), radial-gradient(circle at 6.7% 75%, rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0) 70.71%), radial-gradient(circle at 93.3% 75%, rgba(0, 255, 0, 0.5), rgba(0, 255, 0, 0) 70.71%) beige;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  animation: Rotate 1s linear infinite;
}
.containers .left .container .clock-container:before {
  position: absolute;
  content: "";
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0) 70.71%), radial-gradient(circle at 6.7% 75%, rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0) 70.71%), radial-gradient(circle at 93.3% 75%, rgba(0, 255, 0, 0.5), rgba(0, 255, 0, 0) 70.71%) beige;
  filter: blur(5px);
}
.containers .left .container .clock {
  width: 390px;
  height: 390px;
  border-radius: 50%;
  background-color: #26282b;
  z-index: 1;
  position: absolute;
  left: 5px;
  top: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.containers .left .container .clock .time {
  font-size: 72px;
  background-color: #7d8cea;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.containers .left .container .clock .dot {
  width: 10px;
  height: 10px;
  background-color: #7d8cea;
  border-radius: 50%;
  position: absolute;
  right: 60px;
  top: 60px;
}
.containers .left .container .clock .dot:before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: #7d8cea;
  border-radius: 50%;
  position: absolute;
  filter: blur(2px);
}
.containers .right {
  flex: 1;
  height: 100%;
  background-color: #26282b;
  display: flex;
  justify-content: center;
  align-items: center;
}
.containers .right .clock {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: #26282b;
  box-shadow: 12px 12px 14px #18191b, -12px -12px 14px #34373b;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.containers .right .clock .nut {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #be3b25;
  z-index: 1000;
}
.containers .right .clock .hour,
.containers .right .clock .min,
.containers .right .clock .sec {
  position: absolute;
  display: flex;
  justify-content: center;
  border-radius: 50%;
}
.containers .right .clock .hour {
  width: 160px;
  height: 160px;
  z-index: 10;
}
.containers .right .clock .hour:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 80px;
  background: #ff105e;
  border-radius: 6px 6px 0 0;
}
.containers .right .clock .min {
  width: 190px;
  height: 190px;
  z-index: 11;
}
.containers .right .clock .min:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 90px;
  background: #fff;
  border-radius: 6px 6px 0 0;
}
.containers .right .clock .sec {
  width: 230px;
  height: 230px;
  z-index: 12;
}
.containers .right .clock .sec:before {
  content: "";
  position: absolute;
  width: 2px;
  height: 150px;
  background: #2577d6;
  border-radius: 6px 6px 0 0;
}
.containers .right .clock .mark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #be3b25;
}
.containers .right .clock .mark-1 {
  transform: translateY(-180px);
}
.containers .right .clock .mark-2 {
  transform: rotate(30deg) translateY(-180px);
}
.containers .right .clock .mark-3 {
  transform: rotate(60deg) translateY(-180px);
}
.containers .right .clock .mark-4 {
  width: 10px;
  height: 10px;
  transform: rotate(90deg) translateY(-180px);
}
.containers .right .clock .mark-5 {
  transform: rotate(120deg) translateY(-180px);
}
.containers .right .clock .mark-6 {
  transform: rotate(150deg) translateY(-180px);
}
.containers .right .clock .mark-7 {
  width: 10px;
  height: 10px;
  transform: rotate(180deg) translateY(-180px);
}
.containers .right .clock .mark-8 {
  transform: rotate(210deg) translateY(-180px);
}
.containers .right .clock .mark-9 {
  transform: rotate(240deg) translateY(-180px);
}
.containers .right .clock .mark-10 {
  width: 10px;
  height: 10px;
  transform: rotate(270deg) translateY(-180px);
}
.containers .right .clock .mark-11 {
  transform: rotate(300deg) translateY(-180px);
}
.containers .right .clock .mark-12 {
  width: 10px;
  height: 10px;
  transform: rotate(330deg) translateY(-180px);
}
@keyframes Rotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
